<template>
<ul>
    <li v-for="(item,index) in cars" :key="index">
        商品名称: {{item.name}} 单价:{{item.price}}
        数量:<button @click="dellist(item,index)">-</button>
        {{item.num}}
        <button @click="addlist(item,index)" :disabled="aa">+</button>
    </li>
    <div>总价:{{all}}</div>
</ul>
</template>
<script setup>
import {useUser} from "../../store/usrs"
import {storeToRefs} from "pinia";
import {ref,watchEffect} from "vue"
let all =ref(0)
let userStore=useUser()
let{cars,shopping,aa,kkk}=storeToRefs(userStore)
console.log(kkk.value)
watchEffect(()=>{
    all.value=(kkk.value).toFixed(2)
})
let dellist=(item,index)=>{
    item.num--
    let newshopping= shopping.value.find(i=>{
        return i.id===item.id
    })
    console.log(newshopping.inventory)

    if(item.num<1){
        newshopping.inventory++

        cars.value.splice(index,1)
        console.log(cars.value)
    }else{
        console.log(item.num)
        console.log(cars.value)
        newshopping.inventory++
    }
    if(newshopping.inventory>0){
        aa.value=false
    }
}
let addlist=(item)=>{
    item.num++
    let newshopping= shopping.value.find(i=>{
        return i.id===item.id
    })
    newshopping.inventory--
    console.log(newshopping.inventory)
    if(!newshopping.inventory){
        aa.value=true
    }
}
</script>